<template>
  <div class="item-footer">
    <div class="item-footer-title">
      data source
    </div>
    <div class="item-footer-content">
      <div class="item-footer-list">
        <div class="item-footer-list-title">
          Data source type
        </div>
        <div class="item-footer-list-right">
          <el-radio-group v-model="typeData" size="small">
            <el-radio-button label="1">equipment</el-radio-button>
            <el-radio-button label="2">equipment category</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="item-footer-list">
        <div class="item-footer-list-title">
          set up data sources
        </div>
        <div class="item-footer-list-right">
          <el-button type="primary" icon="el-icon-plus" plain size="small" @click="addList()">add data sources</el-button>
        </div>
      </div>
      <div class="item-data">
        <div class="item-data-list" v-for="(item, index) in dataList" :key="index">
          <div class="item-data-list-index">
            {{ index + 1 }}、
          </div>
          <div class="item-data-list-item">
            <!--            <div class="getdevice" @click="visibleIndex=index,getListVisible=true">-->
            <!--              {{ item.detviceoption ? item.detviceoption.name : `${Number(typeData) == 1 ? '选择设备' : '选择设备类目'}` }}-->
            <!--            </div>-->
            <v-selectpage :data="selectpagelist" key-field="id" show-field="name" class="form-control mr10"
                          :tb-columns="columns" :multiple="false" v-model="item.id"
                          @values="multipleValues($event, index)"
                          :placeholder="`${Number(typeData) == 1 ? 'Select device' : 'Select device category'}`"
                          :title="`${Number(typeData) == 1 ? 'Select device' : 'Select device category'}`" :page-size="10" ref="selectPoint"
                          style="width: 130px;">
            </v-selectpage>
            <el-select class="mr10" v-model="item.sku" placeholder="Select Properties" size="small" style="width: 90px;"
                       @change="getData(1)">
              <template v-if="Number(typeData)==1">
                <el-option
                  v-for="item in cate_key_obj[item.category]"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </template>
              <template v-if="Number(typeData)==2">
                <el-option
                  v-for="item in cate_key_obj[item.id]"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </template>
            </el-select>
            <el-input class="mr10" v-model="item.name" placeholder="Enter Name" size="small" style="width: 90px;"
                      @input="getData(1)"></el-input>
            <el-button icon="el-icon-setting" size="small"></el-button>
            <el-button icon="el-icon-document-copy" size="small" @click="copyList(index)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteList(index)"></el-button>
          </div>
        </div>
      </div>
    </div>
    <!--    <getdeviceList :visible.sync="getListVisible" @getOptionData="getOptionData" :typeData="typeData"></getdeviceList>-->
  </div>
</template>

<script>
// import getdeviceList from '@/components/getdeviceList'
import {listCategory} from "@/api/system/category";
import {listDevice} from "@/api/system/device";

export default {
  name: "footer-data",
  components: {},
  props: ['detailComponente'],
  data() {
    return {
      getListVisible: false,
      visibleIndex: 0,
      typeData: '1',
      dataList: [],
      value: '',
      domain_ids: '',
      columns: [
        {
          title: '序列号',
          data: function (row) {
            return row.id
          }
        },
        {title: '名称', data: 'name'}
      ],
      multipleValuesList: [],
      newList: {},
      scoreList: [], // 评分分列表
      selectpagelist: [],
      cate_key_obj: {},
      cate_array: [],
      device_array: [],
      colorLine: []
    }
  },
  watch: {
    typeData() {
      this.dataList = []
      if (Number(this.typeData) === 1) {
        this.selectpagelist = JSON.parse(JSON.stringify(this.device_array))
      } else {
        this.selectpagelist = JSON.parse(JSON.stringify(this.cate_array))
      }
    },
    detailComponente() {
      console.log('有详情了', this.detailComponente)
      if (this.detailComponente) {
        this.colorLine = []
        let data_ = JSON.parse(this.detailComponente.body)
        console.log('有详情了data_', data_)
        for (let item of data_) {
          item.id = item.id.toString()
          item.status = false
          item.category = item.body.category
          if(item.body && item.body.lineColor){
            this.colorLine.push(item.body.lineColor)
          }
        }
        this.dataList = data_
        // console.log('this.dataList:', this.dataList)
      }
    }
  },
  created() {
    this.getDeviceLsit()
    this.getDeviceCateLsit()
  },
  methods: {
    addList() {
      this.dataList.push({
        id: '',
        sku: '',
        name: '',
        category: '',
        cateList: [],
        body: ''
      })
      this.getColorFn()
      // console.log('字段长度：', this.dataList, this.dataList.length-1, this.colorLine)
      let list = JSON.parse(JSON.stringify(this.dataList[this.dataList.length-1]))
      list.body = this.colorLine[this.dataList.length-1]
      this.$set(this.dataList, this.dataList.length-1, list)
      // console.log('字段长度：', this.dataList)
      this.getData(1)
    },
    deleteList(index) {
      this.colorLine.splice(index, 1)
      this.dataList.splice(index, 1)
      this.getData(1)
    },
    copyList(index) {
      let line_ = JSON.parse(JSON.stringify(this.dataList[index]))
      line_.status = false
      this.dataList.push(line_)
      this.getData(1)
    },
    getData(type) {
      let n = this
      // 1 数据变化 2 提交保存
      let data_ = {
        type: this.typeData,
        body: ''
      }
      let body_ = []
      for (let index in this.dataList) {
        let item = this.dataList[index]
        let a_ = {}
        a_.detail = item.detail || ''
        if (!item.id && type !== 1) {
          this.$message.error(`【${index + 1}】${Number(this.typeData) === 1 ? '选择设备' : '选择设备类目'}`)
          return
        }
        if (!item.sku && type !== 1) {
          this.$message.error('选择属性')
          return
        }
        // 分类 ID ， sku 属性名称选择
        if (item.category && item.sku) {
          let id_ = item.id || 0
          if (Number(this.typeData) == 1) {
            id_ = item.category
          }
          if(this.cate_key_obj[id_]){
            for (let child of this.cate_key_obj[id_]) {
              if (child.name === item.sku) {
                a_.detail = JSON.stringify(child)
              }
            }
          }
        }
        a_.id = item.id
        a_.name = item.name
        a_.sku = item.sku
        // 样式
        a_.body= {
          lineColor: n.colorLine[index],
          category: item.category
        }
        body_.push(a_)
      }
      data_.body = body_
      this.$emit('getChildData', {datType: type, data: JSON.parse(JSON.stringify(data_))})
    },
    getColorFn(){
      let letters = '0123456789ABCDEF'.split('');
      let color = '#';
      for (let i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      if(this.colorLine.indexOf(color)===-1){
        this.colorLine.push(color)
      }else{
        this.getColorFn()
      }
    },
    multipleValues(option, index) {
      let list_ = JSON.parse(JSON.stringify(this.dataList[index]))
      console.log('设备id属性：',option)
      if (list_.status || list_.status === undefined) {
        list_.sku = ''
        list_.name = ''
        if (Number(this.typeData) === 1) {
          list_.category = option[0].category // 获取设备类目进而获取类目的属性
        }else{
          list_.category = option[0].id
        }
      } else {
        list_.status = true
      }
      console.log('multipleValues===>', list_)
      this.$set(this.dataList, index, list_)
      this.getData(1)
    },
    getDeviceLsit() {
      this.selectpagelist = []
      listDevice({
        pageNum: 1,
        pageSize: 1000,
      }).then(res => {
        this.device_array = JSON.parse(JSON.stringify(res.rows))
        this.selectpagelist = res.rows
      })
    },
    getDeviceCateLsit() {
      this.selectpagelist = []
      listCategory({
        pageNum: 1,
        pageSize: 1000,
      }).then(res => {
        let a_ = {}
        for (let item of res.rows) {
          a_[item.id] = JSON.parse(item.downData)
        }
        this.cate_key_obj = JSON.parse(JSON.stringify(a_))
        this.cate_array = JSON.parse(JSON.stringify(res.rows))
      })
    },
  }
}
</script>

<style scoped>
.item-footer {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #303133;
}

.item-footer-title {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.item-footer-content {
  padding: 10px;
}

.item-footer-list {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item-footer-list-title {
  margin-right: 20px;
}

.item-data-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-data-list-index {
  display: flex;
  align-items: center;
}

.item-data-list-item {
  flex: 1;
  display: flex;
}

.getdevice {
  height: 32px;
  line-height: 32px;
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  width: 120px;
  padding: 0 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}
</style>
<!--<div class="item-footer-list">-->
<!--<div class="item-footer-list-title">-->
<!--  数据源类型-->
<!--</div>-->
<!--<div class="item-footer-list-right">-->
<!--  <el-radio-group v-model="radio1" size="small">-->
<!--    <el-radio-button label="1">设备</el-radio-button>-->
<!--    <el-radio-button label="2">设备类目</el-radio-button>-->
<!--  </el-radio-group>-->
<!--</div>-->
<!--</div>-->
